<template>
	<view class="footer">
		<view class="footer-content">
			<view class="footer-head">大业美家分公司</view>
			<view class="footer-head2">
				<view></view>
				<view>贵宾热线</view>
				<view></view>
			</view>
			<view class="a">
				<view class="footer-phone" v-for="item in dzdh" :key="item.id">
					<view class="content">{{item.dizhi}}:{{item.phone}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dzdh: [{
						id: 1,
						dizhi: '北京',
						phone: '400-100-1611'
					},
					{
						id: 2,
						dizhi: '南京',
						phone: '400-100-0619'
					},
					{
						id: 3,
						dizhi: '武汉',
						phone: '400-888-4798'
					},
					{
						id: 4,
						dizhi: '济南',
						phone: '400-656-8188'
					},
					{
						id: 5,
						dizhi: '南宁',
						phone: '400-606-6290'
					},
					{
						id: 6,
						dizhi: '成都',
						phone: '400-028-0229'
					},
					{
						id: 7,
						dizhi: '郑州',
						phone: '400-114-0371'
					},
					{
						id: 8,
						dizhi: '沈阳',
						phone: '400-024-6096'
					},
					{
						id: 9,
						dizhi: '无锡',
						phone: '400-668-7771'
					},
					{
						id: 10,
						dizhi: '昆山',
						phone: '400-051-2765'
					},
					{
						id: 11,
						dizhi: '东莞',
						phone: '400-154-6066'
					},
					{
						id: 12,
						dizhi: '佛山',
						phone: '400-861-3208'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.footer {
		background-color: #efefef;
		margin-top: 100rpx;
		height: 370rpx;
	}

	.footer-content {
		width: 90%;
		margin: auto;
		text-align: center;
	}

	.footer-head {
		font-size: 35rpx;
		font-weight: bold;
		padding-top: 40rpx;
	}

	.footer-head2 {
		display: flex;
		margin-top: 10rpx;
	}

	.footer-head2 view:nth-child(1) {
		width: 8%;
		border-bottom: 1px solid #9f9d9d;
		margin-left: 220rpx;
		margin-bottom: 20rpx;
	}

	.footer-head2 view:nth-child(3) {
		width: 8%;
		border-bottom: 1px solid #9f9d9d;
		margin-bottom: 20rpx;
	}

	.content {
		width: 100%;
		font-size: 22rpx;
	}

	.footer-phone {
		width: 30%;
	}

	.a {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.content {
		margin-top: 20rpx;
	}
</style>
